<template>
	<view class="content">
		<view class="mt24 p2432 bgf br12">
			<view class="flex btw">
				<view class="flex1" @click="selectAddress">
					<view class="" v-if="address">
						<view class="flex1 flex_x">
							<view class="mr12 c3 fw600 fs32 mr8 sn1 ">
								{{address.province}}{{address.city}}{{address.district}}{{address.address}}
							</view>
							<u-icon name="arrow-right" color="#939393" size="26rpx"></u-icon>
						</view>
						<view class="c6 fw500 fs24 flex_x mt10">
							<view class="">{{address.contact}}</view>
							<view class="ml30">{{address.telephone}}</view>
						</view>
					</view>
					<view class="" v-else>
						<view class=" flex_x">
							<view class="mr12 c3 fw600 fs32 mr8 sn1 ">暂无地址</view>
							<u-icon name="arrow-right" color="#939393" size="26rpx"></u-icon>
						</view>
						<view class="c6 fw500 fs24 flex_x mt10">请选择地址</view>
					</view>
				</view>
				<view class="shop_btn bg2a7 flex_c cf fs26 ml60">到店消费</view>
			</view>
			<view class="cut_line mtb24"></view>
			<view class="">
				<view class="flex_x" @click="consent">
					<image class="img30" v-if="isConsent" src="/static/classify/xz.png" mode=""></image>
					<image class="img30" v-else src="/static/classify/wxz.png" mode=""></image>
					<view class="ml10 c9 fs24">我已阅读并同意<text class="c2a7" @click.stop="goAgreement">《用户协议》</text></view>
				</view>
			</view>
		</view>

		<view class="mt24 p2432 bgf br12">
			<view class="c3 fw600 fs30 mb40">商品明细</view>
			<view class="">
				<goodsList :list="goods_list" :count='count'></goodsList>
			</view>
			<view class="cut_line mtb24"></view>

			<view class="flex_btw mb24">
				<view class="c3 fw600 fs30">商品小计</view>
				<view class="c3 fw500">
					<text class="fs24">￥</text>
					<text class="fs32">{{oeder_details.total_amount}}</text>
				</view>
			</view>

			<view class="flex_btw mb24">
				<view class="c3 fw600 fs30">优惠券</view>
				<view class="flex_x" @click="toCoupon">
					<view class="mr10 cfe4 fw500 fs24">{{coupon?'-'+coupon.price:'暂无可用优惠券'}}</view>
					<u-icon name="arrow-right" color="#939393" size="26rpx"></u-icon>
				</view>
			</view>

			<view class="flex_y_end c3 fw600 fs30">
				共计{{count}}件商品，合计￥{{oeder_details.total_amount}}
			</view>
		</view>

		<view class="mt24 p2432 bgf br12 flex_btw">
			<view class="c3 fw600 fs30">订单备注</view>
			<view class="flex_x flex1" @click="toRemark">
				<view class="mr10 c9 fw500 fs28 ml20 flex1">
					<u--input inputAlign='right' disabled disabledColor='#fff' placeholder="请填写您的的其他要求" border="none"
						v-model="remark"></u--input>
				</view>
				<u-icon name="arrow-right" color="#939393" size="26rpx"></u-icon>
			</view>
		</view>

		<view class="btn bgf w100">
			<view class="p3032 flex_btw">
				<view class="fw600 fs28 cfe4">合计：￥{{oeder_details.pay_price}}</view>
				<view class="pay_btn bg2a7 flex_c cf fs26" @click="payNow">立即支付</view>
			</view>
		</view>

	</view>
</template>

<script>
	import wxApplet from '../../../../utils/wxApplet/wxApplet.js'
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				oeder_details: '', //预下单详情
				address: '', //地址
				isConsent: false, //是否同意协议
				goods_list: [], //商品列表
				count: '', //商品数量
				price_num: 0, //商品小计
				remark: '', //备注
				coupon: '', //优惠卷
			}
		},
		onLoad() {
			this.sendCity()
			this.yuOrder()
		},
		onShow() {

		},
		onUnload() {
			uni.$off('sendCity') //移除监听事件
			uni.$off('sendRemark') //移除监听事件
			uni.$off('endCoupon') //移除监听事件
		},
		methods: {
			yuOrder() { //预下单
				this.$api.yuOrder({
					shop_id: this.shop.id,
					coupon_id: this.coupon ? this.coupon.id : '',
					address_id: this.address ? this.address.id : '',
				}).then(res => {
					if (res.code == 1) {
						this.goods_list = res.data.goods
						this.count = res.data.count
						this.oeder_details = res.data
						this.address = res.data.address_info
						this.coupon = res.data.coupon
					}
				})
			},

			sendCity() {
				// 接收参数 选择地址
				uni.$on('sendCity', (params) => {
					// console.log(params, 8888);
					this.address = params
					this.yuOrder()
				})

				uni.$on('endCoupon', (params) => {
					// console.log(params, '优惠券');
					this.coupon = params
					this.yuOrder()
				})

				uni.$on('sendRemark', (params) => {
					this.remark = params
				})
			},
			selectAddress() { //选择地址
				uni.navigateTo({
					url: '/pages/user/my/address/address'
				})
			},
			consent() { //勾选协议
				this.isConsent = !this.isConsent
			},
			goAgreement() { //阅读并勾选协议
				uni.navigateTo({
					url: '/pages/share/textContent/textContent?type=user_agreement&title=用户协议',
					success: () => {
						this.isConsent = true
					}
				})

			},
			toRemark() { //填写备注
				uni.navigateTo({
					url: '/pages/user/classify/submitOrder/remark/remark'
				})
			},
			toCoupon() { //我的优惠券
				uni.navigateTo({
					url: `/pages/user/my/coupon/coupon?price=${this.oeder_details.total_amount}`
				})
			},
			payNow() { //立即支付
				if (!this.isConsent) {
					uni.$u.toast('请先阅读并勾选用户协议')
				} else if (!this.address) {
					uni.$u.toast('请先选择地址')
				} else {
					this.$u.throttle(this.addOrder, 500)
				}
			},
			addOrder() { //下单
				this.$api.addOrder({
					content: this.remark
				}).then(res => {
					if (res.code == 1) {
						this.pay(res.data)
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			pay(e) { //支付参数
				this.$api.orderPay({
					id: e
				}).then(res => {
					if (res.code == 1) { //唤起微信支付
						wxApplet.wxPay(res.data).then(res => {
							this.$toast.toast('支付成功', () => {
								uni.redirectTo({
									url: `/pages/user/classify/submitOrder/paySucceed/paySucceed?id=${e}`
								})
							})
						}).catch(err => {
							this.$store.commit('save_user_order_active', 1)
							this.$toast.toast('支付失败', () => {
								this.$store.commit('save_user_order_active', 0)
								uni.switchTab({
									url: '/pages/share/order/order'
								})
							})
						})
					} else if (res.code == 200) { //直接支付成功
						uni.redirectTo({
							url: `/pages/user/classify/submitOrder/paySucceed/paySucceed?id=${e}`
						})
					} else {
						uni.$u.toast(res.msg)
					}
				})
			}
		},
		computed: {
			// priceAll() {
			// 	let num = 0
			// 	this.goods_list.map(item => {
			// 		num += item.num * item.goods.price
			// 	})
			// 	this.price_num = num.toFixed(2)
			// 	if (this.coupon) {
			// 		num -= this.coupon.price
			// 	}
			// 	return num.toFixed(2)
			// },
			...mapState({
				shop: state => state.shop,
			}),
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: calc(150upx + env(safe-area-inset-bottom));

		.shop_btn {
			width: 148upx;
			height: 52upx;
			border-radius: 41upx;
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		padding-bottom: calc(env(safe-area-inset-bottom));

		.pay_btn {
			width: 200upx;
			height: 72upx;
			border-radius: 36upx;
		}
	}
</style>
